<script setup>
import { ref, computed, onMounted } from 'vue'
import Table from './components/Table.vue'
import { tableDatasService } from '@/api/car'
import RealTimeData from './components/RealTimeData.vue'
import { addressStore, tableDataStore, timeDataStore } from '@/stores'

const store = addressStore()
const table = tableDataStore()
const time = timeDataStore()
const slider = ref(false)
const input = ref('')

//计算各个状态的总数
const totalScheduling = computed(() => {
  const counts = {}
  table.items.forEach(state => {
    counts[state.id] =
      table.tableData?.filter(item => item.status === state.id).length ?? 0
  })
  return counts
})

//获取数据
const fetchCarData = async () => {
  try {
    const res = await tableDatasService({
      line_id: store.address1 + '_to_' + store.address2,
      oc_code: ['10596'],
      page_type: 0,
      pos: 0,
      limit: 500,
    })
    table.changeTableData(res.result)
    if (input.value === '') {
      table.resetQueryData()
    }

    console.log('赋值后的tableData:', table.tableData)
  } catch (error) {
    console.error('获取数据失败:', error)
    table.tableData = []
  }
}

//过滤数据
const filterTableData = computed(() => {
  return (
    table.tableData?.filter(item => item.status === table.activeIndex) || []
  )
})

//处理显示数据
const displayData = computed(() => {
  const data =
    table.queryData.length > 0 ? table.queryData : filterTableData.value
  return data.map(item => ({
    ...item,
    links:
      [
        { text: '补单', url: '1' },
        { text: '详情', url: '2' },
        { text: '发车', url: '3' },
      ] || [],
  }))
})
const PromiseAll = () => {
  fetchCarData()
  time.fetchorderData()
  time.fetchtransportData()
  time.fetchtotalData()
}
//调用函数
onMounted(() => {
  fetchCarData()
})
</script>

<template>
  <div class="main">
    <div class="part1">
      <div class="road">
        <p class="line">线路</p>
        <Select v-model="store.address1"></Select>
        <img src="@/assets/change.png" class="change" @click="store.change" />
        <Select v-model="store.address2"></Select>
        <Button class="queryline" @click="PromiseAll"></Button>
      </div>
      <div class="dispatch">
        <a href="">调度参数配置</a>
        <div class="switch">
          <p class="switchText">智能调度开关</p>
          <el-switch v-model="slider" />
        </div>
      </div>
    </div>
    <div class="part2">
      <div class="top">
        <div class="left">
          <el-input v-model="input" placeholder="请输入车牌号查询" />
          <Button @click="table.query(input)"></Button>
        </div>
        <div class="right">
          <div class="classes">
            <div v-for="(item, index) in table.items" :key="index" class="box">
              <div
                @click="table.changeActiveIndex(item.id)"
                :class="{ active: table.activeIndex === item.id }"
              >
                {{ item.text }}({{ totalScheduling[item.id] }})
              </div>
              <hr class="interval" />
            </div>
          </div>
          <div class="deploy">运力配置</div>
        </div>
      </div>
      <div style="width: auto">
        <Table class="biaoge" :data="displayData"></Table>
      </div>
    </div>
    <div class="part3">
      <RealTimeData></RealTimeData>
    </div>
  </div>
</template>

<style scoped>
.part1 {
  height: 144px;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  .road {
    display: flex;
    .line {
      font-size: 18px;
      margin: auto 14px auto 20px;
    }

    .change {
      width: 16px;
      height: 16px;
      margin: auto 20px auto 26px;
    }
    .queryline {
      margin: auto 0 auto 36px;
      font-size: 18px;
    }
  }
  .dispatch {
    margin: auto 20px auto 0;
    width: auto;
    a {
      font-size: 18px;
      text-decoration: none;
      color: #1e8bfa;
      margin: auto 0;
    }
    .switch {
      display: flex;
      margin-top: 10px;
      .el-switch {
        width: 50px;
        height: 25px;
        margin: auto 0;
      }
      .switchText {
        font-size: 18px;
        margin: auto 14px auto 0px;
      }
    }
  }
}
.part2 {
  background-color: #ffffff;
  margin-top: 2px;
  height: auto;
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    .left {
      .el-input {
        border-radius: 10px;
        border: 1px solid #dcdfe6;
        width: 248px;
        height: 38px;
        font-size: 18px;
        margin: 20px;
      }
      .el-button {
        width: 72px;
        height: 38px;
        font-size: 18px;
        margin: auto 0;
      }
    }
    .right {
      display: flex;
      .classes {
        display: flex;
        text-align: center;
        align-items: center;
        line-height: 72px;
        color: #409eff;
        font-size: 18px;
        .box {
          display: flex;
          .interval {
            width: 1px;
            height: 18px;
            background-color: #dcdfe6;
            margin: auto 24px;
          }
        }
        .row {
          border-radius: 10px 0 0 10px;
        }
        .back {
          border-radius: 0 10px 10px 0;
        }
        .active {
          color: #e6a275;
        }
      }
      .deploy {
        margin: auto 20px auto 0;
        color: #65b1ff;
      }
    }
  }
  .biaoge {
    margin: auto;
    font-size: 16px;
  }
}
.part3 {
  height: auto;
  margin-top: 2px;
  background-color: #ffffff;
  font-size: 18px;
  position: relative;
}
</style>
